<template>
  <div id="mapseacher">
    <div id="map"></div>
    <div id="inputArea">
      <section>
        <span>经度：</span>
        <input type="text" id="long" v-model="long" /><br />
      </section>

      <section>
        <span>纬度：</span>
        <input type="text" id="lat" v-model="lat" />
      </section>
      <button id="btn" @click="position">定位</button>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { Point } from "ol/geom";
import { Style, Icon } from "ol/style";
export default {
  data() {
    return {
      map: null,
      long: "",
      lat: "",
    };
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            preload: Infinity,
            source: new XYZ({
              url: "http://t{0-7}.tianditu.com/DataServer?T=img_w&tk=e89ca5ed767309fb1e3e0e2716d538ac&x={x}&y={y}&l={z}",
            }),
          }),
          new TileLayer({
            preload: Infinity,
            source: new XYZ({
              url: "http://t{0-7}.tianditu.com/DataServer?T=cia_w&tk=e89ca5ed767309fb1e3e0e2716d538ac&x={x}&y={y}&l={z}",
            }),
          }),
          new TileLayer({
            preload: Infinity,
            source: new XYZ({
              url: "http://rztiles.sdflc.com/rznongcun20201222/{z}/{x}/{y}.png",
            }),
          })
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [119.55, 35.4],
          zoom: 12,
          maxZoom: 18,
          minZoom: 8,
        }),
      });
    },

    position() {
      // 清除原有图层
      this.map.getLayers().forEach(
        (e)=>{
          if(e instanceof VectorLayer){
            this.map.removeLayer(e)
          }
        }
      )
      // 生成目标数组
      let coordArry = [parseFloat(this.long), parseFloat(this.lat)];

      // 漫游到指定位置
      this.map.getView().animate({ center: coordArry }, { zoom: 17 });

      // 加载图片注记
      let iconFeature = new Feature({
        geometry: new Point(coordArry),
      });

      // 为Feature 设置样式
      iconFeature.setStyle(
        new Style({
          image: new Icon({
            src: require("../assets/logo.png"),
            scale: 0.2,
            anchor: [0.5, 1],
          }),
        })
      );

      // 加载vecLayer图层
      let vecLayer = new VectorLayer({
        source: new VectorSource({
          features: [iconFeature],
        }),
      });

      this.map.addLayer(vecLayer);
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style lang="scss" scoped>
#mapseacher {
  height: 100%;
  width: 100%;
  #map {
    height: 100%;
    width: 100%;
  }
  #inputArea {
    height: 20%;
    width: 20%;
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 1%;
    right: 1%;
    z-index: 99;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    section {
      margin-top: 10%;
      input {
        outline: none;
      }
    }
    #btn {
      margin-top: 5%;
    }
  }
}
</style>
